<template>
    <div class="good-list">
        <div class="top-btn">
            我是商品列表{{msg}}
            <el-button class="f-right" plain size="small" icon="el-icon-plus" @click="toadd(':id')">商品</el-button>
            <el-button class="f-right" style="margin-right:10px;" type="primary" size="small" plain icon="el-icon-plus" 
                @click="dialogFormVisible = true">类别
            </el-button>
        </div>
        
        <!-- 添加类别弹框 -->
        <el-dialog title="添加商品类别" :visible.sync="dialogFormVisible">
            <el-form :model="form" label-position="left" :rules="rules">
                <el-form-item label="分类名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addtype">确 定</el-button>
            </div>
        </el-dialog>
        <div v-if="nodata" class="no-data">---没有相关数据哦---</div>
        <!-- 表格 -->
        <el-table
            v-if="!nodata"
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.3)"
            :data="tableData4"
            style="width: 100%">
            <el-table-column
                fixed
                prop="img"
                label="商品图片"
                width="150">
                <template slot-scope="scope">
                    <img class="good-img" :src="scope.row.img[0]" alt="">
                </template>
            </el-table-column>
            <el-table-column
                prop="goodname"
                label="商品名称"
                min-width="150">
            </el-table-column>
            <el-table-column
                prop="goodprice"
                label="商品价格"
                width="120">
            </el-table-column>
            <el-table-column
                prop="goodtype"
                label="商品类别"
                width="150">
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="120">
                <template slot-scope="scope">
                    <el-button
                        @click.native.prevent="deleteRow(scope.$index, tableData4)"
                        type="text"
                        size="small">
                        移除
                    </el-button>
                    <el-button
                        @click.native.prevent="editgood(scope.$index, tableData4)"
                        type="text"
                        size="small">
                        修改
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next"
            :page-size="pagesize"
            :total="totalnum" popper-class="popcl">
        </el-pagination>
    </div>
</template>

<script>
import api from '../../axios.js'

export default {
    data(){
        return{
            msg:'hhh',
            loading:true,
            nodata:true,
            dialogFormVisible: false,
            tabh:250,
            currentpage:1,
            pagesize:5,
            totalnum:100,
            form: {
                name: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入商品名称', trigger: 'blur' }
                ]
            },
            formLabelWidth: '80px',
            tableData4: [{
                img: 'http://',
                goodname: '黄福袋',
                goodprice: '12',
                goodtype: ['服饰','道具']
            }]
        };
    },
    created(){
        let params = {
            pagesize:this.pagesize,
            currentpage:this.currentpage
        }
        api.getallgoods(params).then((data) => {
            let result = data.data
            if(result.status == 'success'){
                if(result.data){
                    this.tableData4 = result.data
                    this.loading = false
                    this.nodata = false
                }else{
                    this.nodata = true
                }
                
            }else{
                this.loading = false
                this.nodata = true
            }
        })
        let h = this.winHeight() - 60 - 100
    },
    methods: {
        deleteRow(index, rows) {
            rows.splice(index, 1);
        },
        editgood(index, rows){
            let id = rows[index]._id
            console.log(id)
            this.$router.push('/addgood/'+id)
        },
        toadd(id){
            this.$router.push('/addgood/'+id)
            //this.$router.push({ name: 'addgood',params: { id: 0 } })
        },
        addtype(){
            let par = {
                typename:this.form.name
            }
            if(!this.form.name){
                this.$message({
                    message: '名称不能是空的哦～',
                    type: 'warning'
                });
            }else{
                api.addgoodtype(par).then((data) => {
                    let result = data.data
                    if(result.status == 'success'){
                        this.dialogFormVisible = false
                        this.form.name = ''
                        this.$message({
                            message:result.message,
                            type:'success'
                        })
                    }else{
                        this.$message({
                            message:result.message,
                            type:'error'
                        })
                    }
                })
            }
        }
    }
}
</script>

<style lang="stylus">

    .good-list
        .top-btn
            overflow hidden
        .el-table
            margin-top 20px
            margin-bottom 20px
            .good-img
                width 100px
                height 80px
        .el-pagination
            text-align center
            padding 10px 0
        .no-data
            font-size 14px
            text-align center
            color #999
            margin 10px 0
    .f-right
        float right
    .el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li
        border-radius 15px
    .el-pagination.is-background .el-pager li.active
        background #2f4f4f
</style>